<template>
  <div class="product-sidebar">
    <div class="product-sidebar__single">
      <img v-if="ruleForm.avatar" :src="ruleForm.avatar" />
      <img v-else src="/assets/images/avatar/avatar.png" />
    </div>
    <div class="product-sidebar__single">
      <ul class="list-unstyled product-sidebar__links">
        <li>
          <router-link to="center"
            >我的账户<i class="fa fa-angle-right"></i
          ></router-link>
        </li>
        <li>
          <router-link to="wallet"
            >我的钱包<i class="fa fa-angle-right"></i
          ></router-link>
        </li>
        <li>
          <router-link to="order"
            >我的订单<i class="fa fa-angle-right"></i
          ></router-link>
        </li>
        <li>
          <router-link to="address"
            >我的地址<i class="fa fa-angle-right"></i
          ></router-link>
        </li>
        <li>
          <router-link to="reviews"
            >我的评价<i class="fa fa-angle-right"></i
          ></router-link>
        </li>
      </ul>
    </div>
  </div>
</template>

<style scoped>
a.router-link-exact-active {
  color: #60be74;
  font-weight: bolder;
  /* text-decoration: underline; */
}
.product-sidebar__single > img {
  width: 200px;
  flex-shrink: 0;
  height: 200px;
}
</style>

<script>
import { editUser } from "@/api/user";
export default {
  data() {
    return {
      ruleForm: {
        id: localStorage.getItem("UID"),
        email: localStorage.getItem("NAME"),
        avatar: null,
      },
      rules: {},
    };
  },
  mounted() {
    this.getUserInfo();
  },
  methods: {
    getUserInfo() {
      this.ruleForm = this.$store.getters.GetUserInfo;
    },
    handleEdit() {
      editUser(this.ruleForm).then((res) => {
        console.log(res);
      });
    },
  },
};
</script>